<template>
  <div class="app-container pb-10">
    <el-card>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">用户姓名:</div>
            <div class="text-14px ml-3">
              {{ info.user_name }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">用户手机号:</div>
            <div class="text-14px ml-3">
              {{ info.user_tel }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">返佣金额:</div>
            <div class="text-14px ml-3">
              {{ info.price }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">返佣状态:</div>
            <div class="text-14px ml-3">
              <span v-if="info.audit == 0">待审核</span>
              <span v-else-if="info.audit == 1">已审核</span>
              <span v-else-if="info.audit == 2">已驳回</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">返佣操作人:</div>
            <div class="text-14px ml-3">
              {{ info.admin_name }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">操作人手机号:</div>
            <div class="text-14px ml-3">
              {{ info.admin_tel }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">创建时间:</div>
            <div class="text-14px ml-3">
              {{ formatTimestamp(info.created_at * 1000) }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">驳回原因:</div>
            <div class="text-14px ml-3">
              {{ info.err_note }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">转账截图:</div>
            <div class="text-14px ml-3" v-if="info?.image">
              <div v-for="(item, index) in info?.image?.split(',')" :key="index">
                <img width="100" height="100" :src="item" alt="">
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="font-bold !w-120px text-right mb-3">消费记录:</div>
        </el-col>
        <el-col :span="24">
          <el-table :data="info.money_list" style="width: 100%" border>
            <el-table-column prop="p_name" label="用户名" align="center" />
            <el-table-column prop="tel" label="手机号" align="center" />
            <el-table-column prop="price" label="金额" align="center" />
            <el-table-column prop="is_type" label="类型" align="center">
              <template #default="{ row }">
                {{ consumption(row) }}
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" width="180">
              <template #default="scope">
                <template v-if="scope.row.created_at > 0">
                  {{ formatTimestamp(scope.row.created_at * 1000) }}
                </template>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>

    <div v-if="info.audit == 0"
      class="fixed bottom-0 left-0 bg-[#fff] w-[100%] flex justify-center border-t-1 py-2 border-[#e4e7ed] z-10">
      <el-button v-hasPerm="['commission/audit']" @click="handleAudit('return')">驳回</el-button>
      <el-button v-hasPerm="['commission/audit']" type="primary" @click="handleAudit('commit')">通过</el-button>
    </div>

    <!-- 表单弹窗 -->
    <el-dialog v-model="dialog.visible" :title="dialog.title" append-to-body @close="handleCloseDialog">
      <el-form ref="userFormRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="审核状态" prop="type">
          <el-radio-group v-model="form.type" disabled>
            <el-radio value="commit">通过</el-radio>
            <el-radio value="return">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="转账截图" prop="images">
          <image-upload :limit="9" v-model="form.images" />
        </el-form-item>
        <el-form-item label="原因" prop="err_note">
          <el-input :rows="2" type="textarea" v-model="form.err_note" placeholder="请输入备注" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="handleCloseDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import TradeAPI from "@/api/tradeLog";
import { useRoute } from "vue-router";
const route = useRoute();
import { formatTimestamp } from '@/utils/index'

const consumption = (item: any) => {
  let content = ''
  if (item.is_add == 1) {
    return content = item.is_type == 1 ? '项目库/合伙人发布' : '人脉圈发布'
  } else if (item.is_show == 1) {
    return content = item.is_type == 1 ? '查看项目库/合伙人' : '查看人脉圈'
  } else if (item.is_vip == 1) {
    return content = '充值会员'
  } else if (item.is_withdrawal == 1) {
    return content = '提现'
  } else if (item.is_recharge == 1) {
    return content = '充值余额'
  }

  return content
}

// 获取详情
const info = ref<any>({})
const getDataInfo = () => {
  TradeAPI.getTradeInfo({ id: route.query.id }).then((data) => {
    info.value = { ...data };
  });
}

const form = ref<any>({
  type: 'commit',
  images: [],
  image: ""
});
/** 用户表单校验规则  */
const rules = reactive<any>({});

watch(
  () => form.value.type,
  newValue => {

    if (newValue == 'commit') {
      rules.images = [{ required: true, message: "通过必须转账截图", trigger: ["change", "blur"] }]
    } else {
      rules.images = []
    }
  },
  { immediate: true }
);

/**  弹窗对象  */
const dialog = reactive({
  visible: false,
  title: "审核",
});

/** 关闭弹窗 */
function handleCloseDialog() {
  dialog.visible = false;
}

// 打开审核
const handleAudit = (type: string) => {
  form.value.type = type;
  dialog.visible = true;
}

// 提交审核
const userFormRef = ref(ElForm);
const handleSubmit = () => {
  userFormRef.value.validate((valid: any) => {
    if (valid) {
      form.value.id = info.value.id
      form.value.image = form.value.images.join(',');
      TradeAPI.getTradeAudit(form.value).then(res => {
        getDataInfo();
        dialog.visible = false;
        ElMessage.success("操作成功");
      })
    }
  })
}

onMounted(() => {
  getDataInfo();
});
</script>
